<template>
  <!-- Vue3组件中的模板结构可以没有跟标签 -->
  <h1>APP组件</h1>
  <h2>Vue3 ref函数</h2>
  <hr>
  <h3>姓名：{{ name }}</h3>
  <h3>年龄：{{ age }}</h3>
  <button @click="updateAge">年龄++</button>
  <h4>工作类型：{{ job.type }} </h4>
  <h4>工作类型：{{ job.salary }}k </h4>
  <button @click="addSalary">年龄薪水</button>
  <hr>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'App',
  // 此处只是测试一下setup，暂时不考虑响应式问题
  setup() {
    let name = ref("张三");
    let age = ref(18);
    let job = ref({
      type: "前端工程师",
      salary: 10
    });

    function updateAge() {
      age.value = age.value + 1;
    }
    function addSalary() {
      job.value.salary = job.value.salary + 1;
    }

    // 返回一个对象
    return {
      name,
      age,
      job,
      updateAge,
      addSalary
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
